<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <BaseOption
          :form="form"
          option="componentStyle"
          @change="changeColorVal"
        />
        <VsFormItem
          :label="$demoi18n('panel.cssStyle.bgColor')"
          class="background"
        >
          <ColorPicker v-model:value="form.backgroundColor" />
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('panel.label.multiSelect')"
          :helptip="$demoi18n('select.panel.multipleTip')"
        >
          <el-switch v-model="form.multiple"></el-switch>
        </VsFormItem>
        <VsFormItem
          v-vs-field-show="form.multiple"
          :label="$demoi18n('word.numberOfOptions')"
          :helptip="$demoi18n('select.panel-property.maxNumSelect')"
        >
          <Range
            v-model:value="form.multiMaxCount"
            :min="1"
            :max="100"
            type="input"
          />
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.borderRadius')"
          prop="borderRadius"
          label-width="95px"
          :rules="genRulesByKey('borderRadius')"
        >
          <Range
            v-model:value="form.borderRadius"
            :min="0"
            :max="14"
            type="input"
          />
        </VsFormItem>
        <OptionCollapse active="cssStyle.title">
          <el-collapse-item
            :title="$demoi18n('panel.label.titleStyle')"
            name="cssStyle.title"
          >
            <BaseOption
              :form="form"
              option="title"
              :label="$demoi18n('panel.label.titleContent')"
            />
            <VsFormItem :label="$demoi18n('panel.label.titleMarker')">
              <el-switch v-model="form.istitleMarker"></el-switch>
            </VsFormItem>
            <BaseOption
              :form="form"
              option="cssStyle.title"
              :df-css-style-attrs="dfCssStyleAttrs.title"
            />
            <BaseOption :form="form" option="isTitleSignVisiable" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="signMarginLeft" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="verticalLineBackgroundColor" />
            <VsFormItem :label="$demoi18n('panel.label.textFieldWidth')">
              <el-switch v-model="form.titleWidthSwitch"></el-switch>
            </VsFormItem>
            <BaseOption
              :form="form"
              option="cssStyle.titleSize"
              :df-css-style-attrs="dfCssStyleAttrs.title.titleSize"
            />
          </el-collapse-item>
        </OptionCollapse>
      </el-form>
    </div>
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form">
      <template #ExtStyleSetting>
        <ExtStyleSetting
          :form="form"
          :config="config"
          :widgetInstanceId="widgetInstanceId"
          :extStyleOptions="extStyleOptions"
          @save="extStylesSave"
        />
      </template>
    </PanelPropertyBottom>
  </div>
</template>
<script>
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import Range from '@/components/common/range/range.vue';
import VsFormItem from '@/components/common/vs-form-item/vs-form-item.vue';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import { genRulesByKey } from '@/utils/rules';
import BaseOption from '../../common/base-option/base-option.vue';
import ExtStyleSetting from '@/components/common/ext-style/ext-style-setting.vue';

const placeholderSelector = '::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder';
export default {
  name: 'PanelProperty',
  components: { BaseOption, OptionCollapse, Range, ColorPicker, PanelLabelOverflowTooltip, VsFormItem, ExtStyleSetting },
  mixins: [panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    return {
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      isLoading: false,
      form: {
        title: '',
        componentStyle: window._adoPremise.uc.theme,
        width: '',
        titleWidthSwitch: false,
        size: {
          width: '',
          height: '',
        },
        position: {
          x: '',
          y: '',
        },
        borderRadius: 4,
        dfCssStyleAttrs: {},
      },
      extStyleOptions: [
        { label: this.$demoi18n('word.optionText'), value: `.el-input__inner, .select-box-select-option-${this.widgetInstanceId}, .el-tree-node__label, ${placeholderSelector}` },
        { label: this.$demoi18n('common.popUpWindow'), value: '.el-select-dropdown, .el-popper__arrow::before, .select-content>.regions-tree-body>.filter-tree.el-tree' },
      ],
    };
  },
  computed: {
    dfCssStyleAttrs() {
      const { titleWidthSwitch } = this.form;
      const style = {
        fontSize: 12,
        color: this.getValByCompStl('#3c3c3c', '#00f7ff', '#eee'),
        backgroundColor: this.getValByCompStl('#fff', '#0D263A', '#232323'),
        fontFamily: 'unset',
        fontWeight: 'normal',
        value: {
          backgroundColor: '',
        },
        titleSize: {},
      };
      if (titleWidthSwitch) {
        style.titleSize.width = 100;
        style.titleSize.textAlign = 'right';
      }
      return {
        title: style,
      };
    },
  },
  watch: {
    'form.multiple'(newVal) {
      this.config.config.property.multiple = newVal;
    },
  },
  created() {
    // 读取配置
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
      this.form.borderRadius = this.form.borderRadius || 4;
      this.form.istitleMarker = this.form.istitleMarker === undefined ? false : this.form.istitleMarker;
    }
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    changeColorVal() {
      this.form.cssStyle.title.backgroundColor = this.getValByCompStl('#fff', '#0D263A', '#232323');
      this.form.cssStyle.title.color = this.getValByCompStl('#3c3c3c', '#00f7ff', '#eee');
      this.form.backgroundColor = this.getValByCompStl('#fff', '#0D263A', '#232323');
    },
    genRulesByKey,
  },
};
</script>

<style lang="less" scoped>
@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  :deep(.el-form-item) {
    &.background {
      .el-color-picker__color {
        border: none;
        border-left: 1px solid #999999;
      }
    }
  }
  .content {
    .prop-form {
      padding: 0 10px;

      :deep(.el-form-item) {
        margin-bottom: 0;
      }
      .input-number {
        width: 80px;
        :deep(.el-input-number__decrease) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input-number__increase) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input__inner) {
          padding-left: 19px;
          padding-right: 19px;
        }
      }
      .input-number-left {
        margin-right: 25px;
      }

      .color-radio-group {
        background-color: #eeeeee;
        :deep(.el-radio-button__inner) {
          display: inline-block;
          padding: 2px 2px;
          border: 0;
          border-radius: 0;
          height: 24px;
          margin: 2px 2px;
          background: #eeeeee;
        }
        :deep(.is-active) {
          .el-radio-button__inner {
            background-color: #409eff;
          }
        }
      }
    }
  }
}
</style>
